﻿// bind to window onload event
window.addEventListener('load', onloadHandler, false);

var bitmaps = [];

var targetRotationX = 0;
var targetRotationOnMouseDownX = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var targetRotationY = 0;
var targetRotationOnMouseDownY = 0;
var mouseY = 0;
var mouseYOnMouseDown = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

function onloadHandler() {
    var loader = new Preloader();

    for (var i = 1; i <= 20; i++) {
        bitmaps.push(new Image());
    }

    for (var i = 1; i <= 20; i++) {
        loader.addImage(bitmaps[i-1], 'images/' + i + '.png');
    }

    loader.onLoadCallback(init);
}

function init() {
    // get the canvas DOM element
    var canvas = document.getElementById('canvas');

    var debug = document.getElementById("debug");

    WinJS.Utilities.query("#d4").listen("click", drawD4, false);
    WinJS.Utilities.query("#d6").listen("click", drawD6, false);
    WinJS.Utilities.query("#d20").listen("click", drawD20, false);
}

function drawD4() {
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

    // bind a K3D Controller object to the canvas
    // - it is responsible for managing the K3D objects displayed within it
    var k3d = new K3D.Controller(canvas);
    // request 60 frames per second animation from the controller
    k3d.fps = 60;

    // create a K3D object for rendering
    var obj = new K3D.K3DObject();

    for (var i = 0; i < 4; i++) {
        obj.textures.push(bitmaps[i]);
    }

    with (obj) {
        color = [255, 0, 0];        // colour used for wireframe edges and depthcues
        drawmode = "solid";         // one of "point", "wireframe", "solid"
        shademode = "lightsource";  // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
        addphi = 0.6;
        addgamma = addtheta = 1.0;               // 1 degree of rotation around Y axis per frame
        scale = 50;                // make fifty times bigger
        fillstroke = true;
        init(
            // describe the points
            [
                { x: 0, y: 0, z: 0 }, // G of the object - 0
                { x: -Math.sqrt(3) / 3, y: -0.3, z: -Math.sqrt(3) / 3 }, // G of first face - 1
                { x: 0, y: -0.3, z: -Math.sqrt(3) / 3 }, // G of second face - 2
                { x: Math.sqrt(3) / 3, y: -0.3, z: Math.sqrt(3) / 3 }, // G of third face - 3
                { x: 0, y: -Math.sqrt(3) / 3, z: 0 }, // G of forth face - 4
                { x: 0, y: 1, z: 0 }, // top - 5
                { x: -1, y: -Math.sqrt(3) / 3, z: -Math.sqrt(3) / 3 }, // left - 6
                { x: 1, y: -Math.sqrt(3) / 3, z: -Math.sqrt(3) / 3 }, // right - 7
                { x: 0, y: -Math.sqrt(3) / 3, z: ((2 * Math.sqrt(3)) / 3) }, // front - 8
                { x: 1, y: -1, z: 1 }, // mid of edge left - 9
                { x: 1, y: -1, z: 1 }, // mid of edge right - 10
                { x: 1, y: -1, z: 1 }, // mid of edge front - 11
                { x: 1, y: -1, z: 1 }, // mid of bottom edge left - 12
                { x: 1, y: -1, z: 1 }, // mid of bottom edge right - 13
                { x: 1, y: -1, z: 1 }, // mid of bottom edge back - 14
                { x: 0, y: 100, z: 0 },
                { x: 0, y: -100, z: 0 },
                { x: 100, y: 0, z: 0 },
                { x: -100, y: 0, z: 0 }
            ],
            // describe the edges
            [
                //{a:0,b:1},
                //{a:0,b:2},
                //{a:0,b:3},
                //{a:0,b:4},
                //{a:0,b:5},
                { a: 5, b: 6 },
                { a: 6, b: 7 },
                { a: 7, b: 5 },
                { a: 5, b: 8 },
                { a: 8, b: 6 },
                { a: 8, b: 7 },
                { a: 15, b: 16 },
                { a: 17, b: 18 }
            ],
            // describe the faces
            [
                { color: [255, 0, 0], vertices: [5, 6, 7], texture: 0 },
                { color: [0, 255, 0], vertices: [6, 7, 8], texture: 1 },
                { color: [0, 0, 255], vertices: [8, 6, 5], texture: 2 },
                { color: [255, 255, 0], vertices: [5, 7, 8], texture: 3 }
            ]
        );
    }

    // add the object to the controller
    k3d.addK3DObject(obj);

    // begin the rendering and animation immediately
    k3d.paused = false;
    //k3d.frame();
    k3d.tick();
}

function onDocumentMouseDown(event) {

    event.preventDefault();

    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('mouseout', onDocumentMouseOut, false);

    mouseXOnMouseDown = event.clientX - windowHalfX;
    targetRotationOnMouseDownX = targetRotationX;
    mouseYOnMouseDown = event.clientY - windowHalfY;
    targetRotationOnMouseDownY = targetRotationY;
}

function onDocumentMouseMove(event) {

    mouseX = event.clientX - windowHalfX;
    targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.02;
    mouseY = event.clientY - windowHalfY;
    targetRotationY = targetRotationOnMouseDownY + (mouseY - mouseYOnMouseDown) * 0.02;
}

function onDocumentMouseUp(event) {

    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentMouseOut(event) {

    document.removeEventListener('mousemove', onDocumentMouseMove, false);
    document.removeEventListener('mouseup', onDocumentMouseUp, false);
    document.removeEventListener('mouseout', onDocumentMouseOut, false);
}

function onDocumentTouchStart(event) {
    if (event.touches.length == 1) {
        event.preventDefault();

        mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
        targetRotationOnMouseDownX = targetRotationX;
        mouseYOnMouseDown = event.touches[0].pageY - windowHalfY;
        targetRotationOnMouseDownY = targetRotationY;
    }
}

function onDocumentTouchMove(event) {
    if (event.touches.length == 1) {
        event.preventDefault();

        mouseX = event.touches[0].pageX - windowHalfX;
        targetRotationX = targetRotationOnMouseDownX + (mouseX - mouseXOnMouseDown) * 0.05;
        mouseY = event.touches[0].pageY - windowHalfY;
        targetRotationY = targetRotationOnMouseDownY + (mouseX - mouseYOnMouseDown) * 0.05;
    }
}

function drawD6() {
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

    // bind a K3D Controller object to the canvas
    // - it is responsible for managing the K3D objects displayed within it
    var k3d = new K3D.Controller(canvas);
    // request 60 frames per second animation from the controller
    k3d.fps = 60;

    // create a K3D object for rendering
    var obj = new K3D.K3DObject();

    for (var i = 0; i < 6; i++) {
        obj.textures.push(bitmaps[i]);
    }

    with (obj) {
        drawmode = "solid";     // one of "point", "wireframe", "solid"
        shademode = "lightsource";    // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
        addphi = 0.6;
        addtheta = addgamma = 1.0;
        scale = 65;
        init(
           // describe the points of a simple unit cube
           [
               { x: -1, y: 1, z: -1 },
               { x: 1, y: 1, z: -1 },
               { x: 1, y: -1, z: -1 },
               { x: -1, y: -1, z: -1 },
               { x: -1, y: 1, z: 1 },
               { x: 1, y: 1, z: 1 },
               { x: 1, y: -1, z: 1 },
               { x: -1, y: -1, z: 1 }
           ],
           // describe the edges of the cube
           [
               { a: 0, b: 1 },
               { a: 1, b: 2 },
               { a: 2, b: 3 },
               { a: 3, b: 0 },
               { a: 4, b: 5 },
               { a: 5, b: 6 },
               { a: 6, b: 7 },
               { a: 7, b: 4 },
               { a: 0, b: 4 },
               { a: 1, b: 5 },
               { a: 2, b: 6 },
               { a: 3, b: 7 }
           ],
           // describe the polygon faces of the cube
           [
               { color: [255, 0, 0], vertices: [0, 1, 2, 3], texture: 0 },
               { color: [0, 255, 0], vertices: [0, 4, 5, 1], texture: 1 },
               { color: [0, 0, 255], vertices: [1, 5, 6, 2], texture: 2 },
               { color: [255, 255, 0], vertices: [2, 6, 7, 3], texture: 3 },
               { color: [0, 255, 255], vertices: [3, 7, 4, 0], texture: 4 },
               { color: [255, 0, 255], vertices: [7, 6, 5, 4], texture: 5 }
           ]
        );
    }

    // add the object to the controller
    k3d.addK3DObject(obj);

    // begin the rendering and animation immediately
    k3d.paused = false;
    k3d.frame();
}

function drawD20() {
    canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

    // bind a K3D Controller object to the canvas
    // - it is responsible for managing the K3D objects displayed within it
    var k3d = new K3D.Controller(canvas);
    // request 60 frames per second animation from the controller
    k3d.fps = 60;

    // create a K3D object for rendering
    var obj = new K3D.K3DObject();

    var t = (1 + Math.sqrt(5)) / 2;
    var tau = t / Math.sqrt(1 + t * t);
    var one = 1 / Math.sqrt(1 + t * t);

    for (var i = 0; i < 20; i++) {
        obj.textures.push(bitmaps[i]);
    }

    with (obj) {
        color = [0, 0, 0];        // colour used for wireframe edges and depthcues
        drawmode = "solid";         // one of "point", "wireframe", "solid"
        shademode = "lightsource";  // one of "plain", "depthcue", "lightsource" (solid drawing mode only)
        fillstroke = false;
        aboutx = 0; abouty = 0; aboutz = 0;
        addgamma = 0.5; addtheta = -0.4; addphi = 0.6;
        scale = 100;
        linescale = 4.0;
        init(
           [
               { x: tau, y: one, z: 0 },
               { x: -tau, y: one, z: 0 },
               { x: -tau, y: -one, z: 0 },
               { x: tau, y: -one, z: 0 },
               { x: one, y: 0, z: tau },
               { x: one, y: 0, z: -tau },
               { x: -one, y: 0, z: -tau },
               { x: -one, y: 0, z: tau },
               { x: 0, y: tau, z: one },
               { x: 0, y: -tau, z: one },
               { x: 0, y: -tau, z: -one },
               { x: 0, y: tau, z: -one }
           ],
           [
               { a: 4, b: 8 },
               { a: 8, b: 7 },
               { a: 7, b: 4 },
               { a: 7, b: 9 },
               { a: 9, b: 4 },
               { a: 5, b: 6 },
               { a: 6, b: 11 },
               { a: 11, b: 5 },
               { a: 5, b: 10 },
               { a: 10, b: 6 },
               { a: 0, b: 4 },
               { a: 4, b: 3 },
               { a: 3, b: 0 },
               { a: 3, b: 5 },
               { a: 5, b: 0 },
               { a: 2, b: 7 },
               { a: 7, b: 1 },
               { a: 1, b: 2 },
               { a: 1, b: 6 },
               { a: 6, b: 2 },
               { a: 8, b: 0 },
               { a: 0, b: 11 },
               { a: 11, b: 8 },
               { a: 11, b: 1 },
               { a: 1, b: 8 },
               { a: 9, b: 10 },
               { a: 10, b: 3 },
               { a: 3, b: 9 },
               { a: 9, b: 2 },
               { a: 2, b: 10 }
           ],
           [
               { color: [255, 255, 255], vertices: [4, 8, 7], texture: 0 },
               { color: [255, 255, 0], vertices: [4, 7, 9], texture: 1 },
               { color: [0, 255, 255], vertices: [5, 6, 11], texture: 2 },
               { color: [128, 0, 255], vertices: [5, 10, 6], texture: 3 },
               { color: [0, 0, 255], vertices: [0, 4, 3], texture: 4 },
               { color: [255, 0, 0], vertices: [0, 3, 5], texture: 5 },
               { color: [0, 255, 0], vertices: [2, 7, 1], texture: 6 },
               { color: [255, 0, 0], vertices: [2, 1, 6], texture: 7 },
               { color: [128, 128, 128], vertices: [8, 0, 11], texture: 8 },
               { color: [255, 128, 0], vertices: [8, 11, 1], texture: 9 },
               { color: [0, 128, 255], vertices: [9, 10, 3], texture: 10 },
               { color: [255, 0, 128], vertices: [9, 2, 10], texture: 11 },
               { color: [0, 128, 255], vertices: [8, 4, 0], texture: 12 },
               { color: [128, 255, 0], vertices: [11, 0, 5], texture: 13 },
               { color: [0, 255, 128], vertices: [4, 9, 3], texture: 14 },
               { color: [128, 255, 255], vertices: [5, 3, 10], texture: 15 },
               { color: [255, 128, 255], vertices: [7, 8, 1], texture: 16 },
               { color: [128, 0, 255], vertices: [6, 1, 11], texture: 17 },
               { color: [0, 255, 128], vertices: [7, 2, 9], texture: 18 },
               { color: [255, 0, 255], vertices: [6, 10, 2], texture: 19 }
           ]
        );
    }

    // add the object to the controller
    k3d.addK3DObject(obj);

    // begin the rendering and animation immediately
    k3d.paused = false;
    k3d.frame();
}